<!DOCTYPE  html>
<html lang="en">
  <head>
  	<meta charset="utf-8">
  	<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
  	<title>lunbo</title>
  	<style>
  		*{padding:0;margin: 0;}
  		#scroll{
  			width:100%; height:180px; background-color:white; 
  			position:relative;border-bottom:1px solid gray;
  		}/*//这里是给整个大的ＤＩＶ设定属性．*/
		#scroll ul{height:180px; list-style:none;border:1px solid yellow}/*//ＤＩＶ下的ＵＬ属性．*/
		#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}
		/*//ＤＩＶ下的ＵＬ下的ＬＩ属性．注意：display:none;因为要将所有的ｌｉ隐藏了先．当点击的时候在显示出来．*/
		 .subl{
		 	position:absolute; 
		 	bottom:20px; left:40%; 
		 	width:80px;height:20px; line-height:20px; 
		 	text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}/*//上一张按钮的属性．注意一个绝对定位*/．
		.subr{
			position:absolute;
			bottom:20px; right:40%;
			width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer; 
		}/*//下一张按钮的属性．注意一个绝对定位．*/
		.subr:hover{ background:yellow;border-radius:10px;}
		.subl:hover{ background:yellow;border-radius:10px;}
		/*//以上两个hover是鼠标经过的效果．*/
  	</style>
  </head>
  <body>
  	<div id="scroll">
		<p class="subl">上一张<p/>
		<p class="subr">下一张<p/>
		<ul>
		 	<li style="background:red;display:block;"></li>
			<!--　上面的ｌｉ要设定为显示，因为是第一张图片．-->
			 <li style="background:green;"></li>
		 	<li style="background:gray;"></li>
		 	<li style="background:orange;"></li>
		 </ul>
	</div>
	<script type="text/javascript">
		/*轮播*/
		 $(function(){
		 var i=0;
		 var len=$("#scroll ul li").length-1;
		 $(".subl").click(function(){
		 if(i==len){
		i=-1;
		}
		i++;
		$("#scroll ul li").eq(i).fadeIn().siblings().hide();
		 });
		//到这里分开！上面的是上一张点击的效果代码，下面的是下一张点击的效果代码．
		 $(".subr").click(function(){//获取类名的点击事件．
		 if(i==0){
		i=len+1;
		}
		i--;
		$("#scroll ul li").eq(i).fadeIn().siblings().hide();
		 });
		 });
		 /*轮播*/
</script>
  </body>
</html>




<!--<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-">
  <title>最简单的轮播广告</title>
  <style>
   body, div, ul, li {
    margin: 0;
    padding: 0;
   }
   ul {
    list-style-type: none;
   }
   body {
    background: #fff;
    text-align: center;
    font: 12px/px Arial;
   }
   #box {
    position: relative;
    width: 200px;
    height: 100px;
    background: #fff;
    border-radius: px;
    border: px solid #fff;
    margin: px auto;
   }
   #box .list {
    position: relative;
    width: px;
    height: px;
    overflow: hidden;
    border: px solid #ccc;
   }
   #box .list li {
    position: absolute;
    top: ;
    left: ;
    width: px;
    height: px;
    opacity: ;
    transition: opacity .s linear
   }
   #box .list li.current {
    opacity: ;
   }
   #box .count {
    position: absolute;
    right: ;
    bottom: px;
   }
   #box .count li {
    color: #fff;
    float: left;
    width: px;
    height: px;
    cursor: pointer;
    margin-right: px;
    overflow: hidden;
    background: #F;
    opacity: 0.3;
    border-radius: px;
   }
   #box .count li.current {
    color: #fff;
    opacity: .;
    font-weight: ;
    background: #f
   }
  </style>
 </head>
 <body>
 <div id="box">
  <ul class="list">
   <li class="current" style="opacity:1 ;"><img src="images/brand2/001.png" width="" height=""></li>
   <li style="opacity: ;"><img src="images/brand2/002.png" width="" height=""></li>
   <li style="opacity: ;"><img src="images/brand2/003.png" width="" height=""></li>
   <li style="opacity: ;"><img src="images/brand2/004.png" width="" height=""></li>
   <li style="opacity: ;"><img src="images/brand2/005.png" width="" height=""></li>
  </ul>
  <ul class="count">
   <li class="current"></li>
   <li class=""></li>
   <li class=""></li>
   <li class=""></li>
   <li class=""></li>
  </ul>
 </div>
 <script>
  var box=document.getElementById('box');
  var uls=document.getElementsByTagName('ul');
  var imgs=uls[].getElementsByTagName('li');
  var btn=uls[].getElementsByTagName('li');
  var i=index=0; //中间量，统一声明；
  var play=null;
  console.log(box,uls,imgs,btn);//获取正确
  //图片切换, 淡入淡出效果我是用（transition: opacity .s linear）做的,不纠结、简单 在css里面
  function show(a){    //方法定义的是当传入一个下标时，按钮和图片做出对的反应
   for(i=0;i<btn.length;i++ ){
    btn[i].className='';  //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
    btn[a].className='current';
   }
   for(i=0;i<imgs.length;i++){ //把图片的效果设置和按钮相同
    imgs[i].style.opacity=1;
    imgs[a].style.opacity=1;
   }
  }
  //切换按钮功能，响应对应图片
  for(i=0;i<btn.length;i++){
   btn[i].index=i; //不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住
   btn[i].onmouseover=function(){
    show(this.index);
    clearInterval(play); //这就是最后那句话追加的功能
   }
  }
  //自动轮播方法
 function autoPlay(){
    play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
    index++;
    index>=imgs.length&&(index=0);//可能有优先级问题，所以用了括号，没时间测试了。
    show(index);
   },)
  }
  autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了
  //div的鼠标移入移出事件
  box.onmouseover=function(){
   clearInterval(play);
  };
  box.onmouseout=function(){
   autoPlay();
  };
  //按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
 </script>
 </body>
 </html>-->
